<!--
 * @Author: Your Name you@example.com
 * @Date: 2023-05-18 15:40:58
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2023-05-23 18:22:21
 * @FilePath: \anywhere-app\src\views\equipment\dt\components\DtTable.vue
-->
<template>
  <div>
    <div class="wrap-btn">
      <el-button plain
                 icon="el-icon-upload2"
                 @click="importExecl">导入</el-button>
      <el-button plain
                 icon="el-icon-download"
                 @click="exportExecl">导出</el-button>
    </div>
    <el-table v-loading="loading"
              :data="tableData"
              :row-style="{height: '50px'}"
              height="550"
              border>
      <template v-for="(item, index) in tableCloumn">
        <el-table-column v-if="item.prop === 'target'"
                         :key="index"
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width">
          <template slot-scope="scope">
            <ProxyCloumn :scope="scope" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'inHome'"
                         :key="index"
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width">
          <template slot-scope="scope">
            <SwitchCloumn :scope="scope"
                          @handleSwitch="handleSwitch" />
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index"
                         show-overflow-tooltip
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width">
          <template slot-scope="scope">
            {{ scope.row[item.prop] || '--' }}
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import ProxyCloumn from "./ProxyCloumn.vue"
import SwitchCloumn from "./SwitchCloumn.vue"

export default {
  name: 'DtTable',
  components: { ProxyCloumn, SwitchCloumn },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: null
    }
  },
  data () {
    return {
      // tableData: [],
      tableCloumn: [
        {
          prop: 'iMEICode',
          label: '设备编码'
        },
        {
          prop: 'useStatus',
          label: '使用状态'
        },
        {
          prop: 'pactCode',
          label: '最后绑定合同编号'
        },
        {
          prop: 'lastBindRoute',
          label: '最后绑定订单线路'
        },
        {
          prop: 'lastPositionTime',
          label: '最后定位时间'
        },
        {
          prop: 'target',
          label: '指标'
        },
        {
          prop: 'inHome',
          label: '是否在公司'
        },
        {
          prop: 'lastSupplierName',
          label: '最后调度承运方'
        },
        {
          prop: 'lastDispatchTime',
          label: '最后调度时间'
        },
        {
          prop: 'invalidStr',
          label: '设备状态'
        }
      ]
    }
  },
  computed: {

  },
  methods: {
    handleSwitch () {
      this.$emit("handleSwitch")
    },
    importExecl () {
      this.$router.push("/dtDeviceImport");
    },
    async exportExecl () {
      if (!this.tableData.length) {
        this.$message.warning("没有可要导出的数据！");
        return false;
      }
      this.$emit("exportExecl")
    }
  }
}
</script>

<style scoped>
.wrap-btn {
  padding-bottom: 12px;
  text-align: right;
}
</style>